<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">移除btn2的事件监听</button>
    <script>
        const btn1 = document.getElementById('btn1')
        // btn1.addEventListener('click',function(e){
        //     console.log('点击了按钮1')
        // })
        btn1.addEventListener('click', function (e) {
            console.log('点击了按钮2')
        }, {
            once: true
        })
        // btn1.onclick = function (e) {
        //     console.log('点击了按钮1')
        // }
        // btn1.onclick = function (e) {
        //     console.log('点击了按钮2')
        // }
        /* 区别
        1. addEventListener可以同时绑定多个函数
        2.可以监听冒泡或者捕获阶段，而on+事件只能监听冒泡阶段
        3.可以使用第三个参数，实现值监听一次
        4.addEventListener监听的事件可以移除
        */

        /*
        事件移除 removeEventListener()
        */
        // 
        const btn2 = document.getElementById('btn2')
        const btn3 = document.getElementById('btn3')

        // btn2.onclick = btn2Cb
        btn2.addEventListener('click',btn2Cb)

        function btn2Cb(){
            console.log('btn2被点击了')
        }

        btn3.onclick = function () {
            console.log('移除btn2上面的事件')
            btn2.removeEventListener('click', btn2Cb)
        }
    </script>
</body>

</html>